<template>
  <div class="checkSwitch">
    <el-card class="item imgBox">
      <img src="@/assets/imgs/checkAccount/dredge.png" />
      <div class="hint1">您还没有开通对账功能，是否开通？</div>
      <div>
        <!-- <el-button class="btnIcon" round>暂时不要了</el-button> -->
        <el-button type="primary" round class="btnIcon" @click="visible = true"
          >确认开通</el-button
        >
      </div>
    </el-card>
    <el-card class="item textWrap">
      <div class="title">什么是对账？</div>
      <div>
        退款审核功能适用于财务/云尘付管理平台提供的对账功能，帮助对接了云尘付融聚交易接口的客户，确认通过融聚交易发起的交易金额，与支付渠道的结算资金是否一致。财务/运营人员，在进行交易对账时，需要在支付渠道的商户平台网页下载支付渠道「对账单」，同时在云尘付管理平台中下载《云尘付交易报表》。两份报表下载完成后，财务/运营人员使用表格处理软件，将两份报表中的交易明细逐一比对。根据比对结果，财务/运营人员可以定位哪几笔交易，导致支付渠道结算资金和已记录的交易资金不一致。在云尘付管理平台开启交易对账功能后，云尘付每日会自动完成融聚交易交易和支付渠道对账单数据的比对，向客户直接展示比对结果。
      </div>
      <div>1. 支持的支付渠道和交易类型</div>
      <div>
        目前，由支付宝、微信进行处理的支付、退款、撤销类型的交易，都可以由
        云尘付进行自动对账。支付宝、微信支持对账的支付方式见下方图例。
      </div>
      <div>2. 开启交易对账功能</div>
      <div>
        开通对账功能的第二天上午 10
        点后（根据开通支付渠道不同，对账结果显示时间可能延后），可查看到当天的对账结果。云尘付只会对开启对账开关后的融聚交易交易，每日进行自动对账；未开启对账功能前的历史交易，不进行对账处理。
      </div>
      <div>3. 查看对账结果</div>
      <div>
        当前 APP 开启交易对账功能，可在对账菜单的“对账汇总”页面，查看当前 APP
        每天的对账结果，包括当前 APP
        整体交易的对账结果，和支付宝、微信单个支付平台的对账结果。如果当天支付渠道对账单每笔交易的金额、结算总金额，和
        云尘付融聚交易每笔交易明细、交易总金额，双方记录结果都是一致的，则“对账汇总”页面展示的对账结果为“对账成功”。如果当天支付渠道对账单中有一笔或多笔交易的交易日期、交易金额等信息，和云尘付融聚交易记录的交易信息不一致，则“对账结果”页面展示的交易结果为“有差错”。当天对账结果为“有差错”，可以在操作列点击“查看差错”，进入“差错交易”菜单查看具体的差错交易信息。如果您在
        云尘付创建了多个 APP，并在这几个 APP
        中共用一套支付参数；或者有其他项目未使用云尘付融聚交易服务，并配置了当前APP的支付参数，则会在当天的对账结果中显示“有渠道交易未通过本应用发起。
      </div>
      <div>4. 查看差错交易</div>
      <div>
        差错交易菜单包括“未处理差错”和“已处理差错”两个子菜单。未处理差错菜单用于显示对账后的差错交易，供财务/运营人员查看差错交易的详细信息，并按照本公司的差错交易处理方式，以提交工单的方式，告知云尘付运维人员更新差错交易信息。由云尘付运维人员处理后的差错交易，会更新为已处理差错交易，并在“已处理差错”交易菜单进行展示。
      </div>
      <div class="title" style="margin-top: 40px">支持对账的支付方式</div>
      <div class="ali">
        <p class="line"></p>
        <img src="@/assets/imgs/checkAccount/ali.png" class="imgs" />
        <div class="textBox">
          <div style="margin-top: 0">
            <p>支付宝APP支付</p>
            <p>支付宝条码支付</p>
            <p>支付宝扫码支付</p>
          </div>
          <div style="margin-top: 0">
            <p>支付宝手机网站支付</p>
            <p>支付宝电脑网站支付</p>
            <p>支付宝小程序支付</p>
          </div>
        </div>
      </div>
      <div class="ali wechat">
        <p class="line line2"></p>
        <img src="@/assets/imgs/checkAccount/wechat.png" class="imgs" />
        <div class="textBox">
          <div style="margin-top: 0">
            <p>支付宝APP支付</p>
            <p>支付宝条码支付</p>
            <p>支付宝扫码支付</p>
          </div>
          <div style="margin-top: 0">
            <p>支付宝手机网站支付</p>
            <p>支付宝电脑网站支付</p>
            <p>支付宝小程序支付</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="visible"
      :show-close="false"
      top="30vh"
      width="30%"
    >
      <div class="dialogText">
        <i class="el-icon-warning"></i>
        <div>
          <div class="dialogTitle">开通对账功能认证</div>
          <div class="explain">我们将发送一条验证短信至您186****8900的手机</div>
          <div class="codeBox">
            <el-input v-model="name" class="width274"> </el-input>
            <div class="codeBtn">获取验证码</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="visible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dredgeVue",
  data() {
    return {
      visible: false,
      name: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.checkSwitch {
  display: flex;
  .item {
    img {
      width: 684px;
      height: 445px;
    }
  }
  .imgBox {
    text-align: center;
    width: 65%;
    padding-top: 100px;
    .hint1 {
      font-size: 18px;
      font-weight: 600;
      color: #4f595f;
      margin-top: 40px;
      margin-bottom: 12px;
    }
    .hint2 {
      color: #869daa;
    }
    .btnIcon {
      width: 318px;
      height: 50px;
      font-size: 14px;
      border-radius: 35px;
      margin: 40px 0;
      &:first-child {
        margin-right: 30px;
      }
    }
  }
  .textWrap {
    flex: 1;
    margin-left: 20px;
    color: #4f595f;
    padding: 0 20px 20px;
    text-align: justify;
    line-height: 22px;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #1d1c1c;
    }
    div {
      margin-top: 20px;
    }
    .label_ {
      color: #25b5d9;
      margin-left: 28px;
    }
    .ali {
      height: 140px;
      background: #f5fcff;
      border-radius: 10px;
      display: flex;
      padding-right: 40px;
      .line {
        width: 7px;
        height: 140px;
        background: #01a2e9;
        border-radius: 10px 0px 0px 10px;
      }
      .line2 {
        background: #3cb034;
      }
    }
    .wechat {
      background: #f5faf5;
    }
    .imgs {
      width: 36px;
      height: 36px;
      margin: 24px 80px 0 30px;
    }
    .textBox {
      display: flex;
      justify-content: space-between;
      flex: 1;
      p {
        margin: 10px 0;
      }
    }
  }
  .dialogText {
    display: flex;
    .dialogTitle {
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .explain {
      font-size: 16px;
      margin-bottom: 10px;
      margin-top: 30px;
    }
    .width274 {
      width: 274px;
    }
    .codeBox {
      display: flex;
    }
    .codeBtn {
      width: 132px;
      height: 32px;
      background: #25b5d9;
      border-radius: 0px 4px 4px 0px;
      text-align: center;
      line-height: 32px;
      color: #ffffff;
      cursor: pointer;
    }
  }
  :deep(.el-dialog__wrapper) {
    .el-dialog__header {
      padding: 0;
    }
    .el-icon-warning {
      font-size: 20px;
      color: #faad14;
      margin-top: 4px;
      margin-right: 17px;
    }
  }
}
</style>
